<template>
	<view>
		<input
				  v-model="loginname"
					class="loginInput"
				  placeholder="请输入用户名"
				/>
				<input
				  v-model="password"
					class="loginInput"
				  placeholder="请输入密码"
				/>
				
				<button :disabled="flag" block @click="login">
				  登录
				</button>
	</view>
</template>

<script>
	import { ref, computed } from 'vue'
	import { loginFn } from '../../api/user'
	export default {
		setup () {
			const loginname = ref('')
			const password = ref('')
			
			const flag = computed(() => {
				return loginname.value === '' || password.value === ''
			})
			
			const login = () => {
				loginFn({ loginname: loginname.value, password: password.value }).then(res => {
					console.log(res.data)
					if (res.data.code === '10010') {
						uni.showToast({
							title: '用户名不存在',
							icon: 'none'
						})
					} else if (res.data.code === '10011') {
						uni.showToast({
							title: '密码错误',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: '登录成功',
							icon: 'none'
						})
						// 保存登录凭证到本地
						uni.setStorageSync('token', res.data.data.token)
						uni.setStorageSync('userid',res.data.data.userid)
						// // 返回上一页
						uni.navigateBack()
					}
				})
			}
			
			return {
				loginname,
				password,
				flag,
				login
			}
		}
	}
</script>

<style>
.loginInput {
	height: 50px;
	border-bottom: 1rpx solid #ccc;
}
</style>
